<template>
    <div class="PDD2div1">
        <el-row type="flex" justify="center">
            <el-col :span="3" class="PPD2col1">
                <div><i class="el-icon-service" style="font-size:150%"></i></div>
                <div style="font-size:11px">客服</div>
            </el-col>
            <el-col :span="3" class="PPD2col1">
                <div><i class="el-icon-shopping-cart-1" style="font-size:150%" @click="gocart"></i></div>
                <div style="font-size:11px"><span @click="gocart">购物车</span></div>
            </el-col>
            <el-col :span="18" class="PPD2col1">
                <div class="PPD2div2">
                    <span class="PPD2span1">￥{{beforeprice}}</span>
                    <span class="PPD2span2"></span>
                </div>
                <div class="PPD2div3" @click="gotobuy">
                    <div style="font-size:20px">￥{{realsellresult}}</div>
                    <div style="font-size:14px">特卖价 抢></div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'PxPDDown2',
    data(){
        return{
            axiosData:{'price':99999,'id':0},
            mynumber:1,
            ChooseColor:0,
            ChooseStyle:0,
        }
    },
    methods:{
        gocart(){this.$router.push({name:'PxCart'})},
        gotobuy(){
            if(this.ChooseColor == 0 || this.ChooseStyle == 0){
                this.$message({
                    message: `请选择颜色和尺寸参数`,
                    type: 'error'
                });
                console.log('还没选呢');
            }else{
                this.$addr.get(`carts/add_to_cart?pid=${this.axiosData.id}&amount=${this.mynumber}`).then(
                    response=>{
                        this.$router.push({name:'PxCart'})
                        this.$message({
                            message: `加入购物车成功!`,
                            type: 'success'
                        });
                        console.log('请求获取商品详情成功了',response)},
                    error=>{
                        console.log('请求获取商品详情失败了',error.message)
                    })
            }
        }
    },
    computed:{
        realsellresult(){
            return Math.round(this.axiosData.price*0.6)*this.mynumber
        },
        beforeprice(){
            return Math.round(this.axiosData.price)*this.mynumber
        }
    },
    mounted(){
        this.$bus.$on('LefttoRight',(axiosData)=>{
            this.axiosData=axiosData
        })
        this.$bus.$on('Num',(mynumber)=>{
            this.mynumber=mynumber
        })
        this.$bus.$on('IfChoose',(ChooseColor,ChooseStyle)=>{
            this.ChooseColor=ChooseColor
            this.ChooseStyle=ChooseStyle
        })
    },
    beforeDestroy(){
        this.$bus.$off('LefttoRight')
        this.$bus.$off('Num')
        this.$bus.$off('IfChoose')
    }
}
</script>

<style scoped>
.PDD2div1{
    padding-top: 10px;
    padding-bottom: 5px;
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 44px;
    position: fixed;
    bottom: 0px;
    margin-left: -7px;
}
.PPD2col1{
    text-align: center;
}
.PPD2div2{
    margin-right: 8px;
    margin-top: 3px;
    float: right;
}
.PPD2span1{
    text-decoration: line-through;
    background-color: rgb(255, 130, 157);
    color: white;
    padding:17px;
    padding-right: 28px;
    padding-left: 28px;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    font-size: 20px;
}
.PPD2span2{
    background-color: rgb(255, 46, 99);
    padding:17px;
    padding-right: 72px;
    padding-left: 72px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    font-weight: 650;
    font-size: 20px;
}
.PPD2div3{
    /* position: absolute; */
    float: right;
    z-index: 99;
    height: 40px;
    text-align: center;
    color: white;
    margin-top: -38px;
    margin-right: 45px;
}
</style>